<template>
  <view
    v-if="visibleSync" :style="[customStyle, {
      zIndex: uZindex - 1
    }]" class="u-drawer" hover-stop-propagation>
    <u-mask :duration="duration" :custom-style="maskCustomStyle" :mask-click-able="maskCloseAble" :z-index="uZindex - 2" :show="showDrawer && mask" @click="maskClick" />
    <view
      class="u-drawer-content" :class="[
        safeAreaInsetBottom ? 'safe-area-inset-bottom' : '',
        'u-drawer-' + mode,
        showDrawer ? 'u-drawer-content-visible' : '',
        zoom && mode == 'center' ? 'u-animation-zoom' : ''
      ]" :style="[style]"
      @tap="modeCenterClose(mode)" @touchmove.stop.prevent @tap.stop.prevent>
      <view v-if="mode == 'center'" class="u-mode-center-box" :style="[centerStyle]" @tap.stop.prevent @touchmove.stop.prevent>
        <!-- <u-icon
					@click="close"
					v-if="closeable"
					class="u-close"
					:class="['u-close--' + closeIconPos]"
					:name="closeIcon"
					:color="closeIconColor"
					:size="closeIconSize"
				></u-icon> -->
        <text v-if="closeable" class="wk wk-close" @click="close" />
        <scroll-view class="u-drawer__scroll-view" scroll-y="true">
          <slot />
        </scroll-view>
      </view>
      <scroll-view v-else class="u-drawer__scroll-view" scroll-y="true">
        <slot />
      </scroll-view>
      <view class="u-close" :class="['u-close--' + closeIconPos]" @tap="close">
        <!-- <u-icon
					v-if="mode != 'center' && closeable"
					:name="closeIcon"
					:color="closeIconColor"
					:size="closeIconSize"
				></u-icon> -->
        <text v-if="mode != 'center' && closeable" class="wk wk-close" />
      </view>
    </view>
  </view>
</template>

<script>
	/**
	 * popup 弹窗
	 * @description 弹出层容器，用于展示弹窗、信息提示等内容，支持上、下、左、右和中部弹出。组件只提供容器，内部内容由用户自定义
	 * @tutorial https://www.uviewui.com/components/popup.html
	 * @property {String} mode 弹出方向（默认left）
	 * @property {Boolean} mask 是否显示遮罩（默认true）
	 * @property {Stringr | Number} length mode=left | 见官网说明（默认auto）
	 * @property {Boolean} zoom 是否开启缩放动画，只在mode为center时有效（默认true）
	 * @property {Boolean} safe-area-inset-bottom 是否开启底部安全区适配（默认false）
	 * @property {Boolean} mask-close-able 点击遮罩是否可以关闭弹出层（默认true）
	 * @property {Object} custom-style 用户自定义样式
	 * @property {Stringr | Number} negative-top 中部弹出时，往上偏移的值
	 * @property {Numberr | String} border-radius 弹窗圆角值（默认0）
	 * @property {Numberr | String} z-index 弹出内容的z-index值（默认1075）
	 * @property {Boolean} closeable 是否显示关闭图标（默认false）
	 * @property {String} close-icon 关闭图标的名称，只能uView的内置图标
	 * @property {String} close-icon-pos 自定义关闭图标位置（默认top-right）
	 * @property {String} close-icon-color 关闭图标的颜色（默认#909399）
	 * @property {Number | String} close-icon-size 关闭图标的大小，单位rpx（默认30）
	 * @event {Function} open 弹出层打开
	 * @event {Function} close 弹出层收起
	 * @example <u-popup v-model="show"><view>出淤泥而不染，濯清涟而不妖</view></u-popup>
	 */
  import UMask from './u-mask.vue'
  export default {
    name: 'UPopup',
    components: {
      UMask
    },
    props: {
      /**
       * 显示状态
       */
      show: {
        type: Boolean,
        default: false
      },
      /**
       * 弹出方向，left|right|top|bottom|center
       */
      mode: {
        type: String,
        default: 'left'
      },
      /**
       * 是否显示遮罩
       */
      mask: {
        type: Boolean,
        default: true
      },
      // 抽屉的宽度(mode=left|right)，或者高度(mode=top|bottom)，单位rpx，或者"auto"
      // 或者百分比"50%"，表示由内容撑开高度或者宽度
      length: {
        type: [Number, String],
        default: 'auto'
      },
      // 是否开启缩放动画，只在mode=center时有效
      zoom: {
        type: Boolean,
        default: true
      },
      // 是否开启底部安全区适配，开启的话，会在iPhoneX机型底部添加一定的内边距
      safeAreaInsetBottom: {
        type: Boolean,
        default: false
      },
      // 是否可以通过点击遮罩进行关闭
      maskCloseAble: {
        type: Boolean,
        default: true
      },
      // 用户自定义样式
      customStyle: {
        type: Object,
        default() {
          return {};
        }
      },
      value: {
        type: Boolean,
        default: false
      },
      // 此为内部参数，不在文档对外使用，为了解决Picker和keyboard等融合了弹窗的组件
      // 对v-model双向绑定多层调用造成报错不能修改props值的问题
      popup: {
        type: Boolean,
        default: true
      },
      // 显示显示弹窗的圆角，单位rpx
      borderRadius: {
        type: [Number, String],
        default: 0
      },
      zIndex: {
        type: [Number, String],
        default: ''
      },
      // 是否显示关闭图标
      closeable: {
        type: Boolean,
        default: false
      },
      // 关闭图标的名称，只能uView的内置图标
      closeIcon: {
        type: String,
        default: 'close'
      },
      // 自定义关闭图标位置，top-left为左上角，top-right为右上角，bottom-left为左下角，bottom-right为右下角
      closeIconPos: {
        type: String,
        default: 'top-right'
      },
      // 关闭图标的颜色
      closeIconColor: {
        type: String,
        default: '#909399'
      },
      // 关闭图标的大小，单位rpx
      closeIconSize: {
        type: [String, Number],
        default: '30'
      },
      // 宽度，只对左，右，中部弹出时起作用，单位rpx，或者"auto"
      // 或者百分比"50%"，表示由内容撑开高度或者宽度，优先级高于length参数
      width: {
        type: String,
        default: ''
      },
      // 高度，只对上，下，中部弹出时起作用，单位rpx，或者"auto"
      // 或者百分比"50%"，表示由内容撑开高度或者宽度，优先级高于length参数
      height: {
        type: String,
        default: ''
      },
      // 给一个负的margin-top，往上偏移，避免和键盘重合的情况，仅在mode=center时有效
      negativeTop: {
        type: [String, Number],
        default: 0
      },
      // 遮罩的样式，一般用于修改遮罩的透明度
      maskCustomStyle: {
        type: Object,
        default() {
          return {}
        }
      },
      // 遮罩打开或收起的动画过渡时间，单位ms
      duration: {
        type: [String, Number],
        default: 250
      }
    },
    data() {
      return {
        visibleSync: false,
        showDrawer: false,
        timer: null,
        closeFromInner: false, // value的值改变，是发生在内部还是外部
      };
    },
    computed: {
      // 根据mode的位置，设定其弹窗的宽度(mode = left|right)，或者高度(mode = top|bottom)
      style() {
        let style = {};
        // 如果是左边或者上边弹出时，需要给translate设置为负值，用于隐藏
        if (this.mode == 'left' || this.mode == 'right') {
          style = {
            width: this.width ? this.getUnitValue(this.width) : this.getUnitValue(this.length),
            height: '100%',
            transform: `translate3D(${this.mode == 'left' ? '-100%' : '100%'},0px,0px)`
          };
        } else if (this.mode == 'top' || this.mode == 'bottom') {
          style = {
            width: '100%',
            height: this.height ? this.getUnitValue(this.height) : this.getUnitValue(this.length),
            transform: `translate3D(0px,${this.mode == 'top' ? '-100%' : '100%'},0px)`
          };
        }
        style.zIndex = this.uZindex;
        // 如果用户设置了borderRadius值，添加弹窗的圆角
        if (this.borderRadius) {
          switch (this.mode) {
          case 'left':
            style.borderRadius = `0 ${this.borderRadius}rpx ${this.borderRadius}rpx 0`;
            break;
          case 'top':
            style.borderRadius = `0 0 ${this.borderRadius}rpx ${this.borderRadius}rpx`;
            break;
          case 'right':
            style.borderRadius = `${this.borderRadius}rpx 0 0 ${this.borderRadius}rpx`;
            break;
          case 'bottom':
            style.borderRadius = `${this.borderRadius}rpx ${this.borderRadius}rpx 0 0`;
            break;
          default:
          }
          // 不加可能圆角无效
          style.overflow = 'hidden';
        }
        if (this.duration) style.transition = `all ${this.duration / 1000}s linear`;
        return style;
      },
      // 中部弹窗的特有样式
      centerStyle() {
        let style = {};
        style.width = this.width ? this.getUnitValue(this.width) : this.getUnitValue(this.length);
        // 中部弹出的模式，如果没有设置高度，就用auto值，由内容撑开高度
        style.height = this.height ? this.getUnitValue(this.height) : 'auto';
        style.zIndex = this.uZindex;
        style.marginTop = `-${this.addUnit(this.negativeTop)}`;
        if (this.borderRadius) {
          style.borderRadius = `${this.borderRadius}rpx`;
          // 不加可能圆角无效
          style.overflow = 'hidden';
        }
        return style;
      },
      // 计算整理后的z-index值
      uZindex() {
        // return this.zIndex ? this.zIndex : this.$u.zIndex.popup;
        return 1000
      }
    },
    watch: {
      value(val) {
        if (val) {
          this.open();
        } else if (!this.closeFromInner) {
          this.close();
        }
        this.closeFromInner = false;
      }
    },
    mounted() {
      // 组件渲染完成时，检查value是否为true，如果是，弹出popup
      this.value && this.open();
    },
    methods: {
      addUnit(value = 'auto', unit = 'rpx') {
        value = String(value);
        // 用uView内置验证规则中的number判断是否为数值
        const reg = /^(?:-?\d+|-?\d{1,3}(?:,\d{3})+)?(?:\.\d+)?$/
        return reg.test(value) ? `${value}${unit}` : value;
      },
      // 判断传入的值，是否带有单位，如果没有，就默认用rpx单位
      getUnitValue(val) {
        if (/(%|px|rpx|auto)$/.test(val)) return val;
        else return val + 'rpx'
      },
      // 遮罩被点击
      maskClick() {
        this.close();
      },
      close() {
        // 标记关闭是内部发生的，否则修改了value值，导致watch中对value检测，导致再执行一遍close
        // 造成@close事件触发两次
        this.closeFromInner = true;
        this.change('showDrawer', 'visibleSync', false);
      },
      // 中部弹出时，需要.u-drawer-content将居中内容，此元素会铺满屏幕，点击需要关闭弹窗
      // 让其只在mode=center时起作用
      modeCenterClose(mode) {
        if (mode != 'center' || !this.maskCloseAble) return;
        this.close();
      },
      open() {
        this.change('visibleSync', 'showDrawer', true);
      },
      // 此处的原理是，关闭时先通过动画隐藏弹窗和遮罩，再移除整个组件
      // 打开时，先渲染组件，延时一定时间再让遮罩和弹窗的动画起作用
      change(param1, param2, status) {
        // 如果this.popup为false，意味着为picker，actionsheet等组件调用了popup组件
        if (this.popup == true) {
          this.$emit('input', status);
        }
        this[param1] = status;
        if (status) {
          // #ifdef H5 || MP
          this.timer = setTimeout(() => {
            this[param2] = status;
            this.$emit(status ? 'open' : 'close');
          }, 50);
          // #endif
          // #ifndef H5 || MP
          this.$nextTick(() => {
            this[param2] = status;
            this.$emit(status ? 'open' : 'close');
          })
          // #endif
        } else {
          this.timer = setTimeout(() => {
            this[param2] = status;
            this.$emit(status ? 'open' : 'close');
          }, this.duration);
        }
      }
    }
  };
</script>

<style scoped lang="scss">
	// @import "../../libs/css/style.components.scss";

	// 定义混入指令，用于在非nvue环境下的flex定义，因为nvue没有display属性，会报错
	@mixin vue-flex($direction: row) {
		/* #ifndef APP-NVUE */
		display: flex;
		flex-direction: $direction;
		/* #endif */
	}

	.u-drawer {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		overflow: hidden;
	}

	.u-drawer-content {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		position: absolute;
		z-index: 1003;
		transition: all 0.25s linear;
	}

	.u-drawer__scroll-view {
		width: 100%;
		height: 100%;
	}

	.u-drawer-left {
		top: 0;
		bottom: 0;
		left: 0;
		background-color: #ffffff;
	}

	.u-drawer-right {
		right: 0;
		top: 0;
		bottom: 0;
		background-color: #ffffff;
	}

	.u-drawer-top {
		top: 0;
		left: 0;
		right: 0;
		background-color: #ffffff;
	}

	.u-drawer-bottom {
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #ffffff;
	}

	.u-drawer-center {
		@include vue-flex;
		flex-direction: column;
		bottom: 0;
		left: 0;
		right: 0;
		top: 0;
		justify-content: center;
		align-items: center;
		opacity: 0;
		z-index: 99999;
	}

	.u-mode-center-box {
		min-width: 100rpx;
		min-height: 100rpx;
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		position: relative;
		background-color: #ffffff;
	}

	.u-drawer-content-visible.u-drawer-center {
		transform: scale(1);
		opacity: 1;
	}

	.u-animation-zoom {
		transform: scale(1.15);
	}

	.u-drawer-content-visible {
		transform: translate3D(0px, 0px, 0px) !important;
	}

	.u-close {
		position: absolute;
		z-index: 3;
	}

	.u-close--top-left {
		top: 30rpx;
		left: 30rpx;
	}

	.u-close--top-right {
		top: 30rpx;
		right: 30rpx;
	}

	.u-close--bottom-left {
		bottom: 30rpx;
		left: 30rpx;
	}

	.u-close--bottom-right {
		right: 30rpx;
		bottom: 30rpx;
	}
</style>
